import React,{Component} from "react";
import {message} from "antd";
import "@/assets/css/Shopping.css";
// 导入组件
import axios from "@/services/http.js";
class Shopping extends Component{
	state={
		// 需要渲染的数据
		HeroicList:[],
		ActorsList:[],
		MianarmsList:[],
		AuxiliaryList:[],
		ThrowarmsList:[],
		MeleearmsList:[],
	};
	render(){
		return(
			// 背景
			<div className="shoppingbox">
					{/*购物车*/}
					<div className="buyCar">
						{/*购物车标题*/}
						<div className="CarName">我的装备库</div>
						{/*购物车主体容器*/}
						<div className="CarContianer">
							{/*购物车主体内容列表*/}
							<div className="CarContent">
							
							</div>
						</div>
						{/*可收缩开关*/}
						<div className="Switch"  onClick={(e)=>this.letUp(e)}>收起</div>
					</div>
				{/*主面板*/}
				<div className="Heart">
					<div className="title">
					{/*导航logo*/}
					<div className="logo">
						<img src="https://bbs.cf.qq.com/static/image/ossweb-img/logo.png" alt="logo"/>
					{/*导航菜单*/}
					</div>
						<ul className="navList">
							<li title="首页" onClick={(e)=>this.toHome(e)}>
								<dl>
									<dt>首页</dt>
									<dd>Home</dd>
								</dl>
							</li>
							<li title="论坛" onClick={(e)=>this.toChat(e)}>
								<dl>
									<dt>论坛</dt>
									<dd>Chat</dd>
								</dl>
							</li>
							<li title="商城" onClick={(e)=>this.toShopping(e)}>
								<dl>
									<dt>商城</dt>
									<dd>Shopping</dd>
								</dl>
							</li>
							<li title="登录" onClick={(e)=>this.toLogin(e)}>
								<dl>
									<dt className="loginSearch">(未登录)</dt>
									<dd>Login</dd>
								</dl>
							</li>
							<li  className="loginCancel" onClick={(e)=>this.Cancel(e)}>
								<dl>
									<dt>注销</dt>
									<dd>Cancel</dd>
								</dl>
							</li>
						</ul>
					</div>
					{/*商品内容容器*/}
					<div className="container">
						{/*左边放置一个选项卡*/}
						<div className="tabs">
							<ul className="select" onClick={(e)=>this.checkButton(e)}>
								<li className="choosed">英雄级武器</li>
								<li>游戏角色</li>
								<li>主武器</li>
								<li>副武器</li>
								<li>投掷武器</li>
								<li>近战武器</li>
							</ul>
						</div>
						{/*内容*/}
						<div className="content">
							<div className="woshixuanxiang">
								{
								this.state.HeroicList.map((item,index)=>{
									return(
										<dl key={index} className="copyDl">
											<dt>
												<img src={item.armsImg} alt="tu"/>
											</dt>
											<dd>
												<strong>{item.armsName}</strong>
												<div className="price">价格:<span>{item.armsPrice}</span>米</div>
												<button onClick={(e)=>this.addFoods(e)}>立即购买</button>
											</dd>
										</dl>
									)
								})
								}
							</div>
							<div className="unselected woshixuanxiang">
								{
								this.state.ActorsList.map((item,index)=>{
									return(
										<dl key={index} className="copyDl">
											<dt>
												<img src={item.actorImg} alt="tu"/>
											</dt>
											<dd>
												<strong>{item.actorName}</strong>
												<div className="price">价格:<span>{item.actorPrice}</span>米</div>
												<button onClick={(e)=>this.addFoods(e)}>立即购买</button>
											</dd>
										</dl>
									)
								})
								}
							</div>
							<div className="unselected woshixuanxiang">
								{
								this.state.MianarmsList.map((item,index)=>{
									return(
										<dl key={index} className="copyDl">
											<dt>
												<img src={item.armsImg} alt="tu"/>
											</dt>
											<dd>
												<strong>{item.armsName}</strong>
												<div className="price">价格:<span>{item.armsPrice}</span>米</div>
												<button onClick={(e)=>this.addFoods(e)}>立即购买</button>
											</dd>
										</dl>
									)
								})
								}
							</div>
							<div className="unselected woshixuanxiang">
								{
								this.state.AuxiliaryList.map((item,index)=>{
									return(
										<dl key={index} className="copyDl">
											<dt>
												<img src={item.armsImg} alt="tu"/>
											</dt>
											<dd>
												<strong>{item.armsName}</strong>
												<div className="price">价格:<span>{item.armsPrice}</span>米</div>
												<button onClick={(e)=>this.addFoods(e)}>立即购买</button>
											</dd>
										</dl>
									)
								})
								}
							</div>
							<div className="unselected woshixuanxiang">
								{
								this.state.ThrowarmsList.map((item,index)=>{
									return(
										<dl key={index} className="copyDl">
											<dt>
												<img src={item.armsImg} alt="tu"/>
											</dt>
											<dd>
												<strong>{item.armsName}</strong>
												<div className="price">价格:<span>{item.armsPrice}</span>米</div>
												<button onClick={(e)=>this.addFoods(e)}>立即购买</button>
											</dd>
										</dl>
									)
								})
								}
							</div>
							<div className="unselected woshixuanxiang">
								{
								this.state.MeleearmsList.map((item,index)=>{
									return(
										<dl key={index} className="copyDl">
											<dt>
												<img src={item.armsImg} alt="tu"/>
											</dt>
											<dd>
												<strong>{item.armsName}</strong>
												<div className="price">价格:<span>{item.armsPrice}</span>米</div>
												<button onClick={(e)=>this.addFoods(e)}>立即购买</button>
											</dd>
										</dl>
									)
								})
								}
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	};
	
	// 跳转首页
	toHome=()=>{
		this.props.history.push("/home");
	}
	// 跳转登录
	toLogin=()=>{
		if(localStorage.getItem("token")){
			message.warn("已有帐号登录！请先注销！")
		}else{
			this.props.history.push("/login");
		}
		
	}
	// 跳转社区
	toChat=()=>{
		this.props.history.push("/chat");
		document.location.reload();
	}
	// 跳转商城
	toShopping=()=>{
		this.props.history.push("/shopping");
		document.location.reload();
	}
	// 退出登录
	Cancel=()=>{
		// 如果有token
		if(localStorage.getItem("token")){
			// 删除token username
			localStorage.removeItem('token');
			localStorage.removeItem('username');
			// 重新加载本页面
			document.location.reload();
		}
	}
	
	// 点击收起购物车
	letUp=()=>{
		// 获取显示容器对象
		let CarContianer=document.querySelector(".CarContianer")
		// 控制按钮名字
		let switchHtml=document.querySelector(".Switch");
	
		// 进行收起和展开
		if(CarContianer.classList.contains("CarContianerHeight")){
			CarContianer.classList.remove("CarContianerHeight")
			switchHtml.innerHTML="收起"
		}else{
			CarContianer.classList.add("CarContianerHeight")
			switchHtml.innerHTML="展开"
		}
		
	}
	
	// 点击加入购物车
	addFoods=(e)=>{
		// 获取到对象
		let rootDate=e.target.parentNode.parentNode.children
		let img =rootDate[0].children[0].src
		let title=rootDate[1].children[0].innerHTML
		let price =rootDate[1].children[1].children[0].innerHTML
		console.log(price)
		let father = document.querySelector(".CarContent");
		let newdiv = document.createElement('div');
			newdiv.className="foodSpace";
			newdiv.innerHTML=`
					<div class="foodsImg">
						<img src=${img} alt="j" class="foodsImgsize"/>
					</div>
					<div class="foodsinfo">
						<span>${title}</span>
						<span>${price}米</span>
					</div>
				`;
			 father.appendChild(newdiv);
	}
	
	// 生命周期函数
	componentDidMount(){
		// 判断是否有token
		if(!localStorage.getItem("token")){
			this.props.history.push("/login")
		}
		
		// 查看是否已经登录
		if(localStorage.getItem("token")){
			// 修改登录状态
			document.querySelector(".loginSearch").innerHTML="(已登陆)";
			document.querySelector(".loginSearch").style.color="green";
			
		}else{
			document.querySelector(".loginSearch").innerHTML="(未登陆)";
			document.querySelector(".loginSearch").style.color="red";
		}
		// 注销按钮状态
		if(localStorage.getItem("token")){
			// 修改注销按钮状态
			document.querySelector(".loginCancel").style.color="rgba(255,255,255)";
			
		}else{
			document.querySelector(".loginCancel").style.color="rgba(255,255,255,.5)";
		}
		
		// 获取数据
		axios.post("https://www.fastmock.site/mock/49db6bc2e47e172f28ec03877c5263d6/CF_api/shopping/arms").then(ret=>{
			// 将获取的值进行存储
				this.setState({
					HeroicList:ret.data.Heroic,
					ActorsList:ret.data.Actors,
					MianarmsList:ret.data.Mianarms,
					AuxiliaryList:ret.data.Auxiliary,
					ThrowarmsList:ret.data.Throwarms,
					MeleearmsList:ret.data.Meleearms,
				})
			})
		}
	
	// 切换按钮样式
	checkButton(e){
		// 每次点击切换菜单，显示屏拉回顶部
		document.querySelector(".container").scrollTop=0;
		// console.log(e.target)
		let k=0;
		// 选项变化
		// 获取所有的li对象
		let liList = document.querySelectorAll(".select li");
		// 清除选中样式
		for(let i=0;i<liList.length;i++){
			liList[i].classList.remove("choosed");
			// 获取下标
			if(liList[i]===e.target){
				k=i;
			}
		}
		// 给选中按钮绑定样式
		if(e.target.tagName==="LI"){
			e.target.classList.add("choosed");
		}
		
		// 显示内容变化
		let divList = document.querySelectorAll(".woshixuanxiang");
		// 遍历显示页面
		for(let j=0;j<divList.length;j++){
			// 给每个套上隐藏
			divList[j].classList.add("unselected");
		}
		// 接触选中显示
		divList[k].classList.remove("unselected");
	}
}

export default Shopping;